<template>
    <div class="foot">
        <div class="my-div">
            <a-divider orientation="left">电缆信息</a-divider>
            <a-form :model="cableInformation" name="basic" :label-col="{ span: 12 }">
                <a-row>
                    <a-col :pull="1" :span="8">
                        <!-- <a-form-item label="规格型号">
                            <a-input v-model:value="params.cableInformation.specification" mode="tags" style="width: 150px;"
                                placeholder="请输入规格型号"></a-input>
                        </a-form-item> -->
                        <a-form-item label="规格型号" name="specification" :rules="[{ required: true, message: '请选择电缆规格型号' }]">
                            <a-select v-model:value="cableInformation.specification" placeholder="请选择电缆规格型号"
                                style="width: 250px;" @change="cableChange">
                                <a-select-option v-for="item of cableData" :value="item.id" :key="item.id">
                                    {{ item.cableId + "（" + item.manufacturer + "）" }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="电缆长度(m)">
                            <a-input-number v-model:value="cableInformation.length" style="width: 200px;"
                                controls-position="right" :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="启用时间">
                            <a-date-picker v-model:value="cableInformation.startDate" format="YYYY-MM-DD"
                                style="width: 200px;" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <!-- <a-col :pull="1" :span="6">
                        <a-form-item label="拉断力值(kN)">
                            <a-input v-model:value="params.cableInformation.tensileValue" style="width: 150px;"
                                controls-position="right" />
                        </a-form-item>
                    </a-col> -->
                    <a-col :pull="1" :span="8">
                        <a-form-item label="拉断力试验日期" format="YYYY-MM-DD">
                            <a-date-picker v-model:value="cableInformation.tensileDate" style="width: 250px;" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="拼接位置(m)">
                            <a-input-number v-model:value="cableInformation.splicingPosition" style="width: 200px;"
                                controls-position="right" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="标定/校深日期" format="YYYY-MM-DD">
                            <a-date-picker v-model:value="cableInformation.revisionDeepDate" style="width: 200px;" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :pull="1" :span="8">
                        <a-form-item label="标定/校深后下井次数" format="YYYY-MM-DD">
                            <a-input-number v-model:value="cableInformation.revisionDeepTimes" style="width: 250px;"
                                controls-position="right" :min="0" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <a-form :model="params" name="basic" :label-col="{ span: 12 }">
                <a-divider orientation="left">测井复杂处置工具</a-divider>
                <a-row>
                    <a-space v-for="(disposalTool, index) in dynamicValidateForm.complexToolsList" :key="disposalTool.id"
                        style="display: flex;" align="baseline">
                        <a-col :push="2" :span="22">
                            <a-form-item label="工具名称" :name="['complexToolsList', index, 'size']">
                                <a-input v-model:value="disposalTool.toolName" mode="tags" style="width: 150px;"
                                    placeholder="请输入工具名称"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :push="4" :span="22">
                            <a-form-item label="规格型号" :name="['complexToolsList', index, 'size']">
                                <a-input v-model:value="disposalTool.specification" mode="tags" style="width: 150px;"
                                    placeholder="请输入规格型号"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :push="7" :span="22">
                            <a-form-item label="数量" :name="['complexToolsList', index, 'size']">
                                <a-input v-model:value="disposalTool.numbers" mode="tags" style="width: 150px;"
                                    placeholder="请输入数量"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :push="10" :span="20">
                            <a-form-item label="工具状况" :name="['complexToolsList', index, 'size']">
                                <a-input v-model:value="disposalTool.condition" style="width: 150px;"
                                    placeholder="请输入工具状况"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-button style="width: 100px; margin-left: 130px;"
                            v-if="dynamicValidateForm.complexToolsList.length > 1" class="dynamic-delete-button"
                            :disabled="dynamicValidateForm.complexToolsList.length === 1" type="dashed" block
                            @click="removeComplexToolsList(disposalTool)">
                            <MinusCircleOutlined />删除行
                        </a-button>
                    </a-space>
                </a-row>
                <a-button type="dashed" style="width: 100%;" block @click="addDomain">
                    <PlusOutlined />添加一行测井复杂处置工具
                </a-button>
                <a-divider orientation="left">安全风险与防范措施</a-divider>
                <a-row>
                    <a-space v-for="(riskPrevention, index) in dynamicValidateForm.riskPreventionList"
                        :key="riskPrevention.id" style="display: flex;" align="baseline">
                        <a-col :span="12">
                            <a-form-item label="风险描述" :name="['riskPreventionList', index, 'size']">
                                <a-input v-model:value="riskPrevention.risk" mode="tags" style="width: 420px;"
                                    placeholder="请输入风险描述"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :push="2" :span="12">
                            <a-form-item label="防范措施" :name="['riskPreventionList', index, 'size']">
                                <a-input v-model:value="riskPrevention.prevention" mode="tags" style="width: 420px;"
                                    placeholder="请输入防范措施"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-button style="margin-left:110px;width: 100px;"
                            v-if="dynamicValidateForm.riskPreventionList.length > 1" class="dynamic-delete-button"
                            :disabled="dynamicValidateForm.riskPreventionList.length === 1" type="dashed" block
                            @click="removeRiskPreventionList(riskPrevention)">
                            <MinusCircleOutlined />删除行
                        </a-button>
                    </a-space>
                </a-row>
                <a-button type="dashed" style="width: 100%;" block @click="addDomain">
                    <PlusOutlined />添加一行安全风险与防范措施
                </a-button>
            </a-form>
        </div>
    </div>
    <div class="steps-action">
        <a-button @click="prev">上一步</a-button>
        <a-button style="margin-left: 8px" type="primary" @click="next">完成</a-button>
    </div>
</template>
<script setup>
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
import DesignScheme from '@/api/design/schemes.js'
import WellCables from '@/api/tool/cable.js'
import moment from "moment";
import "moment/locale/zh-cn"
import dayjs from 'dayjs'
import "dayjs/locale/zh-cn"
import useApp from "@/hooks";
const { $, proxy } = useApp();
const emit = defineEmits(["getCurrent"])
const props = defineProps({
    wellQuery: Object
})
const cableData = ref();
const dynamicValidateForm = reactive({
    complexToolsList: [],
    riskPreventionList: [],
});
const cableInformation = ref({
    length: '',
    revisionDeepDate: '',
    revisionDeepTimes: "",
    specification: "",
    splicingPosition: '',
    startDate: '',
    tensileDate: "",
    tensileValue: ''
})
const params = reactive({
    cableInformation: {
        length: '',
        revisionDeepDate: '',
        revisionDeepTimes: "",
        specification: "",
        splicingPosition: '',
        startDate: '',
        tensileDate: "",
        tensileValue: ''
    },
    riskDescription: '',
    riskPreventionList: [],
    complexToolsList: []
})

const removeComplexToolsList = item => {
    let index = dynamicValidateForm.complexToolsList.indexOf(item);
    if (index !== -1) {
        dynamicValidateForm.complexToolsList.splice(index, 1);
    }
};
const removeRiskPreventionList = item => {
    let index = dynamicValidateForm.riskPreventionList.indexOf(item);
    if (index !== -1) {
        dynamicValidateForm.riskPreventionList.splice(index, 1);
    }
};
const addDomain = (e) => {
    console.log(e.target.innerText);
    if (e.target.innerText == '添加一行测井复杂处置工具') {
        dynamicValidateForm.complexToolsList.push({
            condition: '',
            numbers: '',
            specification: '',
            toolName: '',
            id: Date.now(),
        });
    } else if (e.target.innerText == '添加一行安全风险与防范措施') {
        dynamicValidateForm.riskPreventionList.push({
            size: '',
            depth: '',
            id: Date.now(),
        });
    }
};
// 获取电缆信息
function getlistCable() {
    let queryCable = { pageNum: 1, pageSize: 100, sortBy: "id", searchKey: "" };
    WellCables.queryList(queryCable).then((res) => {
        cableData.value = res.content;
        console.log("cableData", cableData.value);
    });
}
getlistCable();

function cableChange() {
    const cable = cableData.value.find(res => {
        return res.id === cableInformation.value.specification
    })
    cableInformation.value.specification = `${cable.cableId}(${cable.manufacturer})`
    console.log('电缆型号', cableInformation.value.specification)
}
//注入信息
function setNewData(res) {
    for (const key in res) {
        if (res.hasOwnProperty(key) && params.hasOwnProperty(key)) {
            params[key] = res[key];
        }
    }
    cableInformation.value = params.cableInformation
    //日期处理
    if (params.cableInformation.revisionDeepDate) {
        params.cableInformation.revisionDeepDate = dayjs(params.cableInformation.revisionDeepDate, 'YYYY-MM-DD');
    } if (params.cableInformation.startDate) {
        params.cableInformation.startDate = dayjs(params.cableInformation.startDate, 'YYYY-MM-DD');
    } if (params.cableInformation.tensileDate) {
        params.cableInformation.tensileDate = dayjs(params.cableInformation.tensileDate, 'YYYY-MM-DD');
    }
    dynamicValidateForm.riskPreventionList = []
    res.riskPreventionList?.forEach(e => {
        dynamicValidateForm.riskPreventionList.push({
            prevention: e.prevention,
            risk: e.risk,
            id: e.risk,
        })
    })
    dynamicValidateForm.complexToolsList = []
    res.complexToolsList?.forEach(e => {
        dynamicValidateForm.complexToolsList.push({
            condition: e.condition,
            numbers: e.numbers,
            specification: e.Specification,
            toolName: e.toolName,
            id: e.toolName,
        })
    })
}
//获取已有信息
getWellQuery()
function getWellQuery() {
    let state = localStorage.getItem("state");
    if (state === '修改井' && !props.wellQuery.hasOwnProperty("cableInformation")) {
        DesignScheme.getDataOne(localStorage.getItem("schemeId")).then(res => {
            setNewData(res)
            cableInformation.value = params.cableInformation
        })
    } else {
        setNewData(props.wellQuery)
    }

}
//下一步
function next() {
    console.log(params.cableInformation)
    params.cableInformation = cableInformation.value
    params.riskPreventionList = dynamicValidateForm.riskPreventionList
    params.complexToolsList = dynamicValidateForm.complexToolsList
    // if (params.cableInformation.revisionDeepDate) { params.cableInformation.revisionDeepDate = moment(params.cableInformation.revisionDeepDate).format('YYYY-MM-DD') }
    // if (params.cableInformation.startDate) { params.cableInformation.startDate = moment(params.cableInformation.startDate).format('YYYY-MM-DD') }
    // if (params.cableInformation.tensileDate) { params.cableInformation.tensileDate = moment(params.cableInformation.tensileDate).format('YYYY-MM-DD') }
    if (params.cableInformation.specification == null || params.cableInformation.specification == '') {
        $.showToast({
            title: '请选择电缆',
            icon: 'warn'
        })
    } else {
        params.page = 'submit'
        emit('getCurrent', params)
    }
}
//上一步
function prev() {
    params.cableInformation = cableInformation.value
    params.riskPreventionList = dynamicValidateForm.riskPreventionList
    params.complexToolsList = dynamicValidateForm.complexToolsList
    // if (params.cableInformation.revisionDeepDate) { params.cableInformation.revisionDeepDate = moment(params.cableInformation.revisionDeepDate).format('YYYY-MM-DD') }
    // if (params.cableInformation.startDate) { params.cableInformation.startDate = moment(params.cableInformation.startDate).format('YYYY-MM-DD') }
    // if (params.cableInformation.tensileDate) { params.cableInformation.tensileDate = moment(params.cableInformation.tensileDate).format('YYYY-MM-DD') }
    params.page = 1
    emit('getCurrent', params)
}
</script>
<style scoped>
.my-div {
    width: 1370px;
    padding: 10px;
    transform: scaleY(-1);
}

.foot {
    overflow-x: auto;
    transform: scaleY(-1);
}
</style>